<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('区块')"></head>
<body>
<div th:replace="include/admin/adminNavigator::html"></div>
<script>
    $(function () {
        var data4Vue = {
            uri: 'UTXO',
            beans: []
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                this.list();
            },
            methods: {
                list: function () {
                    var url = this.uri;
                    axios.get(url).then(function (response) {
                        vue.beans = response.data;
                    });
                }
            }
        });
    });

</script>
<div id="workingArea">
    <h1 class="label label-info">区块</h1>
    <br>
    <br>
    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="success">
                <th>ID</th>
                <th>Transaction ID</th>
                <td>Input</td>
                <td>Output</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td>{{bean.id}}</td>
                <td>{{bean.transactions.id}}</td>
                <td>{{bean.input}}</td>
                <td>{{bean.output}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div th:replace="include/admin/adminFooter::html"></div>
</body>
</html>